<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../component/layui/css/layui.css" />
  <link rel="stylesheet" href="../../style/index.css" />
  <title>换届补选</title>
  <style type="text/css">
    .bg {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.17);
    }

    .zz {
      transition: all 0.3s ease;
      font-size: 36px;
    }

    .layui-card:hover .zz {
      transform: scale(1.05);
      color: #fff;
    }

    .top {
      height: 140px;
      padding: 15px;

    }

    .layui-card-body {
      /* border: 1px solid red; */
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 42px);
      /* 减去标题高度 */
      /* text-align: center; */
    }

    .sz {

      /* border: 1px solid black; */
      position: relative;
      height: 42px;
      line-height: 42px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      padding: 0 15px;
      border-radius: 2px 2px 0 0;
      text-align: center;
    }

    .zz {
      width: 80px;
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
      text-align: center;
      /* display: flex; */
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .layui-card {
      /* border: 1px solid red; */
      /* 添加一个小手 */
      cursor: pointer
        /* 点击那个怎么一个阴影方便我知道我选中那个 */
    }

    .layui-card.selected {
      /* border: 2px solid #d31805; */
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <!-- <div class="top">
      <div v-if="a === 'year'" class="layui-row layui-col-space10" v-cloak>
        <div class="layui-col-xs6 layui-col-md3" @click="handleCardClick($event)">
          <div class="layui-card top-panel bg" style="background-color: rgba(184,137,244,1);">
            <div class="sz">换届
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1">
                  {{statistics.huanjie.completed}}/{{statistics.huanjie.total}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3" @click="handleCardClick($event)">
          <div class="layui-card top-panel bg" style="background-color: rgba(95,197,219,1);">
            <div class="sz">补选
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value2">
                  {{statistics.buxuan.completed}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="layui-row layui-col-space10" v-cloak>
        <div v-for="i in 12" :key="i" class="layui-col-xs6 layui-col-md1" @click="handleCardClick(i)">
          <div class="layui-card top-panel bg" :style="{backgroundColor:monthColors[i-1]}">
            <div class="sz">{{i}}月
            </div>
            <div class="layui-card-body" style="height: 50px;width: 100%;">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1" style="font-size: 16px!important;">
                  换届 {{ z[i-1]?.total || 0 }} / {{ z[i-1]?.opened || 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="title" style="margin:0 10px;">
      <div style="padding: 5px;">
        村委会名称&nbsp;&nbsp;<el-input v-model="page.value1" style="width: 200px;margin-right: 10px;"
          placeholder="请输入内容"></el-input>
        <span v-if="a === 'year'">年份&nbsp;&nbsp;<el-input-number v-model="year"
            style="width: 150px;margin-right: 10px;"></el-input-number></span>
        <span v-else>月份&nbsp;&nbsp;<el-input-number v-model="Month"
            style="width: 150px;margin-right: 10px;"></el-input-number></span>
        <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
        <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="yeart"
          v-if="a === 'mout'">年统计</el-button>
        <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="mout" v-else>月统计</el-button>
        <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" plain round
          @click="personalAdd">添加</el-button>
        <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量导入</el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量导出</el-button>
        <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量删除</el-button> -->
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-tree style="max-width: 600px" default-expand-all :expand-on-click-node="false" :data="treeData"
          :props="{ label:'Province'}" @node-click="handleNodeClick" :expand-on-click-node="false">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span>{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <el-table id="table" border
          :data-options="JSON.stringify({ 'TableName': 'party_organization_tenure','primary_key':'Tenure_SerialNumber'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
          @selection-change="handleSelectionChange">
          <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
            :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
            <template #scope="scope">
              <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                {{ scope.row[column.prop] }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column min-width="180" label="补选状态">
            <template v-slot="{row}">
              <span style="color: red;">{{row.Person_Amount == row.Position_Amount?'':'补选'}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="180" label="换届状态">
            <template v-slot="{row}">
              {{isDate(row)}}
            </template>
          </el-table-column> -->
          <el-table-column label="操作" fixed="right" width="160">
            <template #default="{row}">
              <div style="display: flex;align-items: center;">
                <el-button size="small" style="margin-right: 10px;" v-if="row.Personal_Name"
                  :type="row.Personal_Name?'danger':'success'" @click="handleEdit(row)">
                  {{row.Personal_Name?'离任':'补选'}}
                </el-button>
                <el-dropdown trigger="click" @command="(val)=>{this[val](row)}">
                  <el-button size="small" type="danger">
                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="handleShow">
                        换届记录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>

              <!-- <el-button size="small" type="danger" @click="structureAdd(row)">
                离任补选
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
          :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>

  </div>
  </div>
  <script src="../../utils/utils.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>